<template>
<!-- Docker组件 -->
  <div class="docker">
    <div
      :class="{ docker__item: true, 'docker__item--active': index===n }"
      v-for="(item,index) in dockerList"
      :key="item.title"
    >
      <router-link :to="item.to">
        <div class="iconfont" v-html="item.icon"/>
        <div class="docker__item__tittle">{{ item.title }}</div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Docker",
  // 接收父组件传递过来的n属性
  props:['n'],
  setup() {
    const dockerList = [
      { icon: "&#xe9ce;", title: "首页", to: "/" },
      { icon: "&#xe638;", title: "购物车", to: "/cartlist" },
      { icon: "&#xe60e;", title: "订单", to: "/order" },
      { icon: "&#xe65f;", title: "我的", to: "/my" },
    ];
    return {
      dockerList,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../style/viriables";
.docker {
  color: $content-fontcolor;
  width: 100%;
  height: 0.5rem;
  padding: 0 0.18rem;
  position: fixed;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  border-top: 1px solid $content-bgcolor;
  display: flex;
  text-align: center;
  box-shadow:0 -1px 1px 0 $content-bgcolor;
  &__item {
    padding-top: 0.07rem;
    padding-bottom: 0.06rem;
    flex: 1;
    a {
      display:block;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
      color:$content-fontcolor;
    }
    &--active {
      a {
        color: #1fa4fc;
      }
    }
    .iconfont {
      font-size: 0.2rem;
      margin-bottom: 0.02rem;
    }
    &__tittle {
      font-size: 0.2rem;
      transform: scale(0.5, 0.5);
      transform-origin: center top;
    }
  }
}
</style>